<script setup>
import {onMounted, ref, watch} from 'vue';
import { useRoute } from 'vue-router';
import {router} from "../router/index.js";
import {ElMessage} from "element-plus";
import axios from "axios";
const route = useRoute();
const formData = ref({});
const formRef = ref(null)
// 表单验证规则
const rules = {
  residentId:[
    { required: true, message: '请输入姓名', trigger: 'blur' },//不能为空
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },//不能为空
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'blur' }
  ],
  birthDate: [
    { required: true, message: '请选择出生年月', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },//不能为空
    { pattern: /^1[3-9]\d{9}$/, message: '号格式不正确', trigger: 'blur' }

  ],
  institutionId: [
    { required: true, message: '请选择机构', trigger: 'blur' }
  ],
  teamId: [
    { required: true, message: '请选择团队', trigger: 'blur'}
  ],
  doctorId: [
    { required: true, message: '请选择医生', trigger: 'blur' }
  ],
  packageId: [
    { required: true, message: '请选择包', trigger: 'blur' }
  ],
  serviceId: [
    { required: true, message: '请选择项目', trigger: 'blur' }
  ],
  addressId: [
    { required: true, message: '请选择地点', trigger: 'blur' }
  ],
};

//提交
const submitForm = () => {

    formRef.value.validate(valid => {
      if (valid) {
        //新增
        if (formData.value.contractId === undefined){
          formData.value.userName = "admin"
          axios.post('/contract/addService',formData.value).then(res=>{
            ElMessage.success(res.data);
            goBack();
          })
        }else {
          //修改
          formData.value.userName = "admin"
          axios.put('/contract/updateService',formData.value).then(res=>{
            ElMessage.success(res.data);
            goBack();
          })
        }
      }
    })

};

const goBack = () => {
  // 这里可以添加返回的逻辑，例如路由跳转等
  formData.value = {}
  router.go(-1); // 返回上一页，相当于浏览器后退按钮
};
//传值
const getserviceData = () => {
  axios.get(`/contract/selectContractDetail/${route.query.id}`).then(res => {
    formData.value = res.data;
  })
}
const packageOptions = ref([])
//下拉框
const getDropdown = ()=>{
  axios.get('/dropdown/getInstitution').then(res=>{
    packageOptions.value.institution = res.data
  })
  axios.get('/dropdown/getTeam').then(res=>{
    packageOptions.value.team = res.data
  })
  axios.get('/dropdown/getPackage').then(res=>{
    packageOptions.value.package = res.data
  })
  axios.get('/dropdown/getDoctor').then(res=>{
    packageOptions.value.doctor = res.data
  })
  axios.get('/dropdown/getService').then(res=>{
    packageOptions.value.service = res.data
  })
  axios.get('/dropdown/getTagStatus').then(res=>{
    packageOptions.value.tagStatus = res.data
  })
  axios.get('/dropdown/getAddress').then(res=>{
    packageOptions.value.address = res.data
  })
  axios.get('/dropdown/getResident').then(res=>{
    packageOptions.value.resident = res.data
  })
}
const getResident = (id) => {
  axios.get(`/resident/selectResident/${id}`).then(res => {
    formData.value = res.data;
  })
}
const isORNot = ref(false)
onMounted(()=>{
  getDropdown();
  formData.value.contractId = route.query.id
  if(route.query.id !== undefined){
    getserviceData();
    isORNot.value = true;
  }
})
</script>

<template>
  <div class="service-detail-page">
    <div class="header-container">
      <!-- 蓝色竖条 -->
      <div class="blue-pillar"></div>

      <!-- 主标题 -->
      <h1 class="service-title" v-if="formData.contractId === ''|| formData.contractId === undefined">新增服务信息</h1>
      <h1 class="service-title" v-else>编辑服务信息</h1>
    </div>
    <el-form label-width="120px" ref="formRef" :rules="rules" :model="formData">
      <!-- 居民信息 -->
      <h4 style="text-align: left; padding-left: 50px; ">居民信息</h4>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名"  prop="residentId">
            <el-select  v-model="formData.residentId" placeholder="请选择" :disabled="isORNot">
              <el-option
                  v-for="item in packageOptions.resident"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="getResident(item.id)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formData.idCard" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="formData.gender" placeholder="请选择">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="出生年月" prop="birthDate">
            <el-date-picker v-model="formData.birthDate" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" type="date" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地" >
            <el-input v-model="formData.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="居民标签" >
            <el-select  v-model="formData.tags" placeholder="请选择" multiple>
              <el-option
                  v-for="item in packageOptions.tagStatus"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 服务信息 -->
      <h4 style="text-align: left; padding-left: 50px; ">服务信息</h4>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="服务编号">
            <el-input v-model="formData.contractId" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务机构" prop="institutionId">
            <el-select v-model="formData.institutionId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.institution"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务团队" prop="teamId">
            <el-select v-model="formData.teamId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.team"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="服务医生" prop="doctorId">
            <el-select v-model="formData.doctorId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.doctor"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务包" prop="packageId">
            <el-select v-model="formData.packageId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.package"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务项目" prop="serviceId">
            <el-select v-model="formData.serviceId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.service"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="服务地点" prop="addressId">
            <el-select v-model="formData.addressId" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.address"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务时间">
            <el-date-picker v-model="formData.appointmentTime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" type="datetime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="服务备注">
            <el-input :autosize="{ minRows: 5, maxRows: 10 }" v-model="formData.serviceRemark" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="button-group" >
      <el-button type="primary" @click="submitForm">提交审核</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<style scoped>
.header-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  height: 60px;
}

.blue-pillar {
  border-radius: 15px !important;
  width: 8px;
  height: 28px;
  background: #2984F8;
  margin-right: 12px;
}

.service-title {
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  letter-spacing: 1px;
}
.service-detail-page {
  padding: 20px;
}
.button-group {
  margin-top: 20px;
  text-align: left;
  padding-left: 50px;
}
/* 卡片样式 */
.card-header {
  font-weight: 400;
  font-size: 10px;
}
.card-item {
  font-weight: 400;
  font-size: 10px;
}
.family-members-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 卡片间距 */
  align-items: flex-start;
}
.member-card-wrapper {
  flex: 0 0 auto; /* 不伸缩不收缩 */
}


</style>